<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    .active {
      color: black;
      background-color: #87ceeb;
      border: none;
      outline: none;
    }

    th {
      position: relative;
    }

    .topArrow {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid black;
      top: 20px;
      right: 3px;
    }

    .lowArrow {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid black;
      top: 35px;
      right: 3px;
    }

    .borderActive {
      border-color: red;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
    }
  </style>
</head>

<body>
  <button class="add">添加一条新的访客信息</button>
  <button class="del">删除选中</button>
  <button class="sort">年龄排序</button>

  <label>全选功能<input type="checkbox" class="allSelect"></label>

  <button class="reverse">反选</button>
  <button class="num active">序号排序</button>
  <hr>
  <table border="1" cellspacing="0" cellpadding="20">
    <tr>
      <th>
        <span>序列号</span>
        <span class="topArrow "></span>
        <span class="lowArrow borderActive"></span>
      </th>
      <th>姓名</th>
      <th>
        <span>年龄</span>
        <span class="topArrow"></span>
        <span class="lowArrow"></span>
      </th>
      <th>操作</th>
      <th>选择</th>
    </tr>
  </table>

  <script type="text/javascript">
    var info = [{
      name: "胡杭",
      age: 16
    },
    {
      name: "胜明",
      age: 22
    },
    {
      name: "军毅",
      age: 21
    },
    {
      name: "晓华",
      age: 13
    },
    {
      name: "盛聪",
      age: 23
    },
    {
      name: "侦剑",
      age: 32
    },
    {
      name: "红翔",
      age: 25
    },
    {
      name: "超维",
      age: 18
    },
    {
      name: "士琪",
      age: 22
    },
    {
      name: "艳华",
      age: 20
    }
    ];

    let add = document.querySelector(".add");
    let del = document.querySelector(".del");
    let sort = document.querySelector(".sort");
    let allSelect = document.querySelector(".allSelect");
    let reverse = document.querySelector(".reverse");
    let tbody = document.querySelector("tbody");
    let index = 0;
    // let newTr = null;
    let newDelBtn = null;
    let inpList = null;
    let trList = null;
    let isAllSelect = false;
    let newSelectCheckbox = null;
    let numBtn = document.querySelector(".num");
    let isAgeOrder = false;
    let isNumOrder = false;
    let numtop = document.querySelector("th:first-child>.topArrow")
    let numlow = document.querySelector("th:first-child>.lowArrow")
    let agetop = document.querySelector("th:nth-child(3)>.topArrow")
    let agelow = document.querySelector("th:nth-child(3)>.lowArrow")
    numtop.addEventListener("click", function () {
      // numtop.classList.add("borderActive");
      // numlow.classList.remove("borderActive");
      // agetop.classList.remove("borderActive");
      // agelow.classList.remove("borderActive");
      // console.log(numtop.className.includes("Arrow"));

      // 直接获取四个箭头
      document.querySelectorAll("span[class*='Arrow']").forEach((item) => {
        item.classList.remove("borderActive");
        numtop.classList.add("borderActive");

      });





      [...document.querySelectorAll("tr:not(:first-child)")].sort((a, b) => {
        return b.firstElementChild.innerText - a.firstElementChild.innerText;
      }).forEach((item) => {
        tbody.appendChild(item);
      })


      isAgeOrder = false;

    })
    numlow.addEventListener("click", function () {
      numtop.classList.remove("borderActive");
      numlow.classList.add("borderActive");
      agetop.classList.remove("borderActive");
      agelow.classList.remove("borderActive");
      [...document.querySelectorAll("tr:not(:first-child)")].sort((a, b) => {
        return a.firstElementChild.innerText - b.firstElementChild.innerText;
      }).forEach((item) => {
        tbody.appendChild(item);
      })


      isAgeOrder = false;

    })
    agetop.addEventListener("click", function () {
      agetop.classList.add("borderActive");
      agelow.classList.remove("borderActive");
      numtop.classList.remove("borderActive");
      numlow.classList.remove("borderActive");
      trList = document.querySelectorAll("tr:not(:first-child)");

      trList = [...trList].sort((a, b) => {
        return b.children[2].innerText - a.children[2].innerText;
      })

      trList.forEach((item) => {
        tbody.appendChild(item);
      })

      numBtn.classList.remove("active");
      sort.classList.add("active");
      isAgeOrder = false;

    })
    agelow.addEventListener("click", function () {

      agetop.classList.remove("borderActive");
      agelow.classList.add("borderActive");
      numtop.classList.remove("borderActive");
      numlow.classList.remove("borderActive");




      trList = document.querySelectorAll("tr:not(:first-child)");

      trList = [...trList].sort((a, b) => {
        return a.children[2].innerText - b.children[2].innerText;
      })

      trList.forEach((item) => {
        tbody.appendChild(item);
      })

      numBtn.classList.remove("active");
      sort.classList.add("active");
      isAgeOrder = true;
    })


    while (info) {
      if (index === 5) {
        break;
      }
      addItem();
    }

    function addItem() {

      // 块级作用域

      let newTr = document.createElement("tr");

      newDelBtn = document.createElement("button");

      newDelBtn.innerText = "删除";

      newDelBtn.addEventListener("click", function () {

        // tbody.removeChild(this.parentElement.parentElement);

        // tbody.removeChild(newTr);

        // removeChild 通知父节点要删除指定的子节点
        // remove 将自己删除

        newTr.remove();

      })

      newSelectCheckbox = document.createElement("input");
      newSelectCheckbox.setAttribute("type", "checkbox");
      // newSelectCheckbox.checked = isAllSelect;
      allSelect.checked = false;

      newSelectCheckbox.addEventListener("change", () => {
        isAllSelect = [...tbody.querySelectorAll("input")].every((item) => {
          return item.checked;
        })
        allSelect.checked = isAllSelect;
      })

      newTr.innerHTML =
        `
					<td>${(index + 1).toString().padStart(2, 0)}</td>
					<td>${info[(index % info.length)].name}</td>
					<td>${info[(index % info.length)].age}</td>
					<td></td>
					<td></td>
				`;

      newTr.querySelector("td:nth-child(4)").appendChild(newDelBtn);

      newTr.querySelector("td:last-child").appendChild(newSelectCheckbox);
      // agelow.className.includes("borderActive")




      trList = [...document.querySelectorAll("tr:not(:first-child)")];
      trList.push(newTr);
      if (isAgeOrder) {
        // 按照年龄排序插入数据
        // 1. 获取现有tr的数据
        // 2. push(newTr) => 转化
        // 3. sort(年龄)
        // 4. appendChild(item) 插入tbody
        trList.sort((a, b) => {
          return a.children[2].innerText - b.children[2].innerText
        })
        trList.forEach((item) => {
          tbody.appendChild(item)
        })

      } else if (agetop.className.includes("borderActive")) {
        trList.sort((a, b) => {
          return b.children[2].innerText - a.children[2].innerText
        })
        trList.forEach((item) => {
          tbody.appendChild(item)
        })
      }
      else if (numtop.className.includes("borderActive")) {
        trList.sort((a, b) => {
          return b.children[0].innerText - a.children[0].innerText
        })
        trList.forEach((item) => {
          tbody.appendChild(item)
        })

      }
      else {
        tbody.appendChild(newTr);
      }




      index++;
      // (++index === info.length) && (index = 0)

      // 1. document.querySelectorAll(".del")
      // 2. forEach()
      // 3. addEventListener()
      // 4. 删除


    }

    add.addEventListener("click", addItem);


    // add.addEventListener("click", () => {

    // 	// 块级作用域

    // 	let newTr = document.createElement("tr");

    // 	newDelBtn = document.createElement("button");

    // 	newDelBtn.innerText = "删除";

    // 	newDelBtn.addEventListener("click", function() {

    // 		// tbody.removeChild(this.parentElement.parentElement);

    // 		// tbody.removeChild(newTr);

    // 		// removeChild 通知父节点要删除指定的子节点
    // 		// remove 将自己删除

    // 		newTr.remove();

    // 	})

    // 	newTr.innerHTML =
    // 		`
    // 		<td>${(index+1).toString().padStart(2,0)}</td>
    // 		<td>${info[(index%info.length)].name}</td>
    // 		<td>${info[(index%info.length)].age}</td>
    // 		<td></td>
    // 		<td><input type="checkbox"></td>
    // 	`;

    // 	newTr.querySelector("td:nth-child(4)").appendChild(newDelBtn);

    // 	tbody.appendChild(newTr);

    // 	index++;

    // 	// (++index === info.length) && (index = 0)

    // 	// 1. document.querySelectorAll(".del")
    // 	// 2. forEach()
    // 	// 3. addEventListener()
    // 	// 4. 删除

    // })

    del.addEventListener("click", () => {
      // 1. 先获取input
      // 2. 遍历
      // 3. 判断是否选中
      // 4. 选中则移除

      inpList = tbody.querySelectorAll("input:checked");

      inpList.forEach((item) => {
        item.parentElement.parentElement.remove()
        // (item.checked) && (item.parentElement.parentElement.remove());
      })

      isAllSelect = false;
      allSelect.checked = false;


    })

    sort.addEventListener("click", () => {
      trList = document.querySelectorAll("tr:not(:first-child)");

      trList = [...trList].sort((a, b) => {
        return a.children[2].innerText - b.children[2].innerText;
      })

      trList.forEach((item) => {
        tbody.appendChild(item);
      })

      numBtn.classList.remove("active");
      sort.classList.add("active");

      isAgeOrder = true;

    })

    allSelect.addEventListener("change", () => {
      isAllSelect = allSelect.checked;
      tbody.querySelectorAll("input[type='checkbox']").forEach((item) => {
        item.checked = isAllSelect;
      })
    })

    reverse.addEventListener("click", () => {

      // console.log([...tbody.querySelectorAll("input")].filter((item) => {
      // 	item.checked = !item.checked;
      // 	return item.checked;
      // }));

      tbody.querySelectorAll("input").forEach((item) => {
        item.checked = !item.checked;
      })
      isAllSelect = [...tbody.querySelectorAll("input")].every((item) => {
        return item.checked;
      })
      allSelect.checked = isAllSelect;
    })

    numBtn.addEventListener("click", () => {
      [...document.querySelectorAll("tr:not(:first-child)")].sort((a, b) => {
        return a.firstElementChild.innerText - b.firstElementChild.innerText;
      }).forEach((item) => {
        tbody.appendChild(item);
      })

      sort.classList.remove("active");
      numBtn.classList.add("active");

      isAgeOrder = false;
    })
  </script>

  <script type="text/javascript">
			// let arr = [{
			// 	age: 11
			// }, {
			// 	age: 22
			// }, {
			// 	age: 33
			// }, {
			// 	name: "ly"
			// }]
			// // [11,22,33,undefined]
			// arr.map((item) => {
			// 	return item.age
			// })
			// [{
			// 	age: 22
			// },{
			// 	age: 33
			// }]
			// arr.filter((item) => {
			// 	return item.age > 18
			// })
  </script>

</body>

</html>